<template>
  <div class="playerBox">
    <span class="tips" v-if="timeLine === false">请选择一首歌曲进行播放</span>
    <VueSlider
      class="songTimeLine"
      :lazy="true"
      tooltip="none"
      :dotSize="[20, 20]"
      height="4px"
      width="100%"
      v-if="timeLine !== false"
      :value="timeLine"
      @change="timeLineChange"
    ></VueSlider>
    <div class="playerBoxItem" ref="playerBoxItem" v-items @click="gotoplay" v-if="playDetail">
      <!--进度条-->

      <!-- song cover -->
      <div class="coverIcon">
        <img :src="playDetail.cover" alt height="80%" v-proportion="1" />
      </div>
      <!-- song name -->
      <div class="songName">
        <span>{{ playDetail.name }}</span>
      </div>

      <div class="songLrc">
        <span class="textline">{{ play.playLrcArr[lrcTimeLine] }}</span>
      </div>
      <div class="songTime">
        <span>
          {{ $common.fromDate("i:s", play.playTimeLine) }}/{{
          $common.fromDate("i:s", play.playAllTime)
          }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
export default {
  components: {
    VueSlider
  },
  computed: {
    play() {
      return this.$store.getters.getPlayer;
    },
    timeLine() {
      return this.$player.getPlayerPlayTimeLine(this);
    },
    playDetail() {
      return this.$player.getSongDetail(this);
    }
  },
  data() {
    return {
      lrcTimeLine: false
    };
  },
  watch: {
    "play.playTimeLine"(newValue) {
      let value = parseInt(newValue);
      if (this.play.playLrcArr[value]) {
        this.lrcTimeLine = value;
      }
    }
  },
  created() {
    console.log(this.timeLine);
  },
  methods: {
    gotoplay() {
      this.$router.push({
        path: "/player"
      });
    },
    timeLineChange(e) {
      let time = parseInt((e / 100) * this.play.playAllTime);
      this.play.playerObj.currentTime = time;
    },
    goinplayerBoxItem() {
      this.$service.move(this.$refs.playerBoxItem);
    }
  }
};
</script>

<style lang="less" scoped>
.playerBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #223c61;
}

.playerBoxItem {
  width: 96%;
  height: 80%;
  display: flex;
  flex-direction: row;
  background: #223c61;
  padding: 4px;
}

.songTimeLine {
  position: fixed;
  bottom: 8vh;
  width: 98% !important;
  padding: 7px 0px !important;
}
.coverIcon {
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.coverIcon > img {
  border-radius: 50%;
}
.songName {
  width: 20%;
}
.songLrc {
  width: 50%;
}
.songTime {
  width: 20%;
}
.songName,
.songLrc,
.songTime {
  display: flex;
  align-items: center;
}
.songName > span,
.songLrc > span,
.songTime > span {
  line-height: 100%;
  font-size: 20px;
  color: #fff;
}
.tips {
  color: #fff;
}
</style>
